<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
  </style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script>
    const libPath = 'http://localhost:8081/mapbox/'
    const geoPath = 'http://localhost:8081/geoserver/gwc/service/tms/1.0.0/'
    const styleLight = {
        "version": 8,
        "name": "light",
        "sprite": libPath + "bank",
        "glyphs": libPath + "fonts/mapbox/{fontstack}/{range}.pbf",
        "sources": {
            "mapbox": {
                'type':'vector',
                'scheme':'tms',
                'tiles':[geoPath + 'mapbox%3Amapbox-lecture@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']
            }
        },
        "layers": [
            {
                "type": "background",
                "id": "background",
                "paint": {
                    "background-color": "#f7f7f7"
                }
            },
            {
                'id': 'province',
                'source': 'mapbox',
                'source-layer': 'province',
                'type': 'line',
                'paint': {
                    'line-color': '#989ea6',
                    'line-width': 1
                }
            },
            {
                'id': 'railway-border',
                'source': 'mapbox',
                'source-layer': 'railway',
                'type': 'line',
                'minzoom': 6,
                'paint': {
                    'line-color': '#bec4cd',
                    'line-width': 4
                }
            },
            {
                'id': 'railway',
                'source': 'mapbox',
                'source-layer': 'railway',
                'type': 'line',
                'minzoom': 6,
                'paint': {
                    'line-color': '#ffffff',
                    'line-width': 3
                }
            },
            {
                'id': 'railway-dash',
                'source': 'mapbox',
                'source-layer': 'railway',
                'type': 'line',
                'minzoom': 6,
                'paint': {
                    'line-color': '#bec4cd',
                    'line-width': 3,
                    'line-dasharray': [2, 2]
                }
            },
            {
                'id': 'lake',
                'source': 'mapbox',
                'source-layer': 'lake',
                'type': 'fill',
                'paint': {
                    'fill-color': '#b2cefe',
                    'fill-opacity': 0.7
                }
            },
            {
                'id': 'capital',
                'source': 'mapbox',
                'source-layer': 'capital',
                'type': 'circle',
                'paint': {
                    'circle-color': '#ffffff',
                    'circle-radius': 2,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#f00'
                }
            },
            {
                'id': 'capital-label',
                'source': 'mapbox',
                'source-layer': 'capital',
                'type': 'symbol',
                'layout': {
                    'text-field': ['get', 'name'],
                    "text-size": 12,
                    'text-font': ['Guardian Text Sans Web Bold', "Osaka"],
                    'text-anchor': 'left',
                    'text-offset': [1, 0],
                    'text-allow-overlap': false
                }
            }
        ]
    }


    const styleDark = {
        "version": 8,
        "name": "dark",
        "sprite": libPath + "bank",
        "glyphs": libPath + "fonts/mapbox/{fontstack}/{range}.pbf",
        "sources": {
            "mapbox": {
                'type':'vector',
                'scheme':'tms',
                'tiles':[geoPath + 'mapbox%3Amapbox-lecture@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf']
            }
        },
        "layers": [
            {
                "type": "background",
                "id": "background",
                "paint": {
                    "background-color": "#091220"
                }
            },
            {
                'id': 'province',
                'source': 'mapbox',
                'source-layer': 'province',
                'type': 'line',
                'paint': {
                    'line-color': '#6b6c6d',
                    'line-width': 1
                }
            },
            {
                'id': 'railway-border',
                'source': 'mapbox',
                'source-layer': 'railway',
                'type': 'line',
                'minzoom': 6,
                'paint': {
                    'line-color': '#5386b6',
                    'line-width': 4
                }
            },
            {
                'id': 'railway',
                'source': 'mapbox',
                'source-layer': 'railway',
                'type': 'line',
                'minzoom': 6,
                'paint': {
                    'line-color': '#bec4cd',
                    'line-width': 3
                }
            },
            {
                'id': 'railway-dash',
                'source': 'mapbox',
                'source-layer': 'railway',
                'type': 'line',
                'minzoom': 6,
                'paint': {
                    'line-color': '#5386b6',
                    'line-width': 3,
                    'line-dasharray': [2, 2]
                }
            },
            {
                'id': 'lake',
                'source': 'mapbox',
                'source-layer': 'lake',
                'type': 'fill',
                'paint': {
                    'fill-color': '#113549',
                    'fill-opacity': 0.7
                }
            },
            {
                'id': 'capital',
                'source': 'mapbox',
                'source-layer': 'capital',
                'type': 'circle',
                'paint': {
                    'circle-color': '#ffffff',
                    'circle-radius': 2,
                    'circle-stroke-width': 1,
                    'circle-stroke-color': '#2dc4bb'
                }
            },
            {
                'id': 'capital-label',
                'source': 'mapbox',
                'source-layer': 'capital',
                'type': 'symbol',
                'layout': {
                    'text-field': ['get', 'name'],
                    "text-size": 12,
                    'text-font': ['Guardian Text Sans Web Bold', "Osaka"],
                    'text-anchor': 'left',
                    'text-offset': [1, 0],
                    'text-allow-overlap': false
                },
                'paint': {
                    'text-color': '#2dc4bb'
                }
            }
        ]
    }

    const style = {
        "version": 8,
        "name": "lzugis",
        "sprite": libPath + "bank",
        "glyphs": libPath + "fonts/mapbox/{fontstack}/{range}.pbf",
        "sources": {
            "nav": {
                "type": "raster",
                "tiles": ['http://localhost:8081/geoserver/gwc/service/wmts?layer=mapbox%3Ageotiff_coverage&style=&tilematrixset=EPSG%3A900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image%2Fpng&TileMatrix=EPSG%3A900913%3A{z}&TileCol={x}&TileRow={y}',
                    'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "nav",
            "type": "raster",
            "source": "nav",
            "minzoom": 0,
            "maxzoom": 17
        }]
    }

    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 3.5,
        minZoom: 2,
        maxZoom: 18
    });
</script>
</body>
</html>